<template>
  <div>
    <el-row type="flex" class="row-bg" justify="space-between" align="middle">
      <el-col :span="8">
        <div class="journey">
          <span class="hint">单程:</span>
          {{filghtsData.info.departCity+'-'+filghtsData.info.destCity+' / '+filghtsData.info.departDate}}
        </div>
      </el-col>
      <el-col>
        <!-- 选择的地方 -->
        <div class="select_main">
          <!-- 起飞机场 -->
          <el-select v-model="airport" clearable placeholder="起飞机场" @change="filterDataChange">
            <el-option
              v-for="(item,index) in filghtsData.options.airport"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <!-- 起飞时间 -->
          <!-- :value="item" -->
          <!-- :value="`${item.from},${item.to}`" -->
          <el-select v-model="flightTimes" clearable placeholder="起飞时间" @change="filterDataChange">
            <el-option
              v-for="(item,index) in filghtsData.options.flightTimes"
              :key="index"
              :label="item.from+':00 - '+item.to+':00'"
              :value="JSON.stringify(item)"
            ></el-option>
          </el-select>

          <!-- 航空公司 -->
          <el-select v-model="company" clearable placeholder="航空公司" @change="filterDataChange">
            <el-option
              v-for="(item,index) in filghtsData.options.company"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <!-- 机型 -->

          <el-select v-model="aircraftType" clearable placeholder="机型" @change="filterDataChange">
            <el-option
              v-for="(item,index) in [{label:'大',value:'L'},{label:'中',value:'M'},{label:'小',value:'S'}]"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg">
      <el-col :span="8">
        <div class="revocation">
          <span class="hint">筛选:</span>
          <el-button type="primary" class="revocationBtn" plain round @click="cancel">撤销</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["filghtsData"],
  data() {
    return {
      airport: "",
      flightTimes: "",
      company: "",
      aircraftType: "",
    };
  },
  methods: {
    // 过滤
    filterDataChange() {
      let filterData = [...this.filghtsData.flights];
      //   机场
      if (this.airport) {
        filterData = this.setDateFilter(
          filterData,
          "airport",
          "org_airport_name"
        );
      }
      // 时间
      if (this.flightTimes) {
        filterData = this.flightTimesFilter(filterData);
      }
      //   公司
      if (this.company) {
        filterData = this.setDateFilter(filterData, "company", "airline_name");
      }
      //   机型
      if (this.aircraftType) {
        filterData = this.setDateFilter(
          filterData,
          "aircraftType",
          "plane_size"
        );
      }
      this.$emit("filterData", filterData);
    },

    //   普通过滤
    setDateFilter(data, name, value) {
      return data.filter(item => {
        return this[name] == item[value];
      });
    },
    // 时间 value = { from:2 ,to:'4'}
    flightTimesFilter(data) {
      console.log("this.flightTimes: ", this.flightTimes);
      return data.filter(item => {
        const dep = item.dep_time.split(":");
        // console.log('dep[1]: ', dep[1]);
        const { from, to } = JSON.parse(this.flightTimes);
        return +dep[0] >= +from && +dep[0] < +to;
      });
    },
    // 撤销
    cancel() {
      this.airport = "";
      this.flightTimes = "";
      this.company = "";
      this.aircraftType = "";
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-row {
  margin: 20px 0;
}
/deep/ .el-select {
  width: 110px;
}
/deep/ .el-input__inner {
  height: 24px;
  line-height: 24px;
}
/deep/ .el-input__icon {
  // 样式继承
  line-height: inherit;
}
// 筛选
.screen {
  // 左边的提示
  .hint {
    padding-right: 10px;
  }
  .journey,
  .revocation {
    width: 200px;
    font-size: 14px;
  }
  // 单程行
  .journey {
    overflow: hidden;
  }
  // 撤销行
  .revocation {
    .revocationBtn {
      font-size: 14px;
      padding: 0;
      width: 60px;
      height: 30px;
    }
  }
  // 过滤选项
  .select_main {
    margin-left: 50px;
    width: 500px;
    display: flex;
    justify-content: space-around;
  }
}
</style>